<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学成在线</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>

  <!-- 精品课程 -->
  <div class="course wrapper">
    <div class="hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部
        <span class="iconfont icon-arrow-right-bold">
        </span>
      </a>
    </div>
    <div class="bd">
      <ul class="common">
        <!-- <li>
          <a href="#">
            <div class="pic"><img src="./uploads/quality01.png" alt=""></div>
            <h4>JavaScript数据看板项目实战</h4>
            <p><span>高级</span> · <i>1125</i>人在学习</p>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/quality02.png" alt=""></div>
            <h4>Vue.js实战——面经全端项目</h4>
            <p><span>高级</span> · <i>2726</i>人在学习</p>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/quality03.png" alt=""></div>
            <h4>玩转Vue全家桶，iHRM人力资源项目</h4>
            <p><span>高级</span> · <i>9456</i>人在学习</p>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/quality04.png" alt=""></div>
            <h4>Vue.js实战医疗项目——优医问诊</h4>
            <p><span>高级</span> · <i>7192</i>人在学习</p>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/quality05.png" alt=""></div>
            <h4>小程序实战：小兔鲜电商小程序项目</h4>
            <p><span>高级</span> · <i>2703</i>人在学习</p>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/quality06.png" alt=""></div>
            <h4>前端框架Flutter开发实战</h4>
            <p><span>高级</span> · <i>2841</i>人在学习</p>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/quality07.png" alt=""></div>
            <h4>熟练使用React.js——极客园H5项目</h4>
            <p><span>高级</span> · <i>95682</i>人在学习</p>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/quality08.png" alt=""></div>
            <h4>熟练使用React.js——极客园PC端项目</h4>
            <p><span>高级</span> · <i>904</i>人在学习</p>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/quality09.png" alt=""></div>
            <h4>前端实用技术，Fetch API 实战</h4>
            <p><span>高级</span> · <i>1516</i>人在学习</p>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="./uploads/quality10.png" alt=""></div>
            <h4>前端高级Node.js零基础入门教程</h4>
            <p><span>高级</span> · <i>2766</i>人在学习</p>
          </a>
        </li> -->

        <script>
          // 综合案例代码
          // 1. 利用对象数组的数据渲染页面
          // 综合案例代码
          let data = [
            {
              src: './uploads/quality01.png',
              title: 'JavaScript数据看板项目实战',
              num: 1125
            },
            {
              src: './uploads/quality02.png',
              title: 'Vue.js实战——面经全端项目',
              num: 2726
            },
            {
              src: './uploads/quality03.png',
              title: '玩转Vue全家桶，iHRM人力资源项目',
              num: 9456
            },
            {
              src: './uploads/quality04.png',
              title: 'Vue.js实战医疗项目——优医问诊',
              num: 7192
            },
            {
              src: './uploads/quality05.png',
              title: '小程序实战：小兔鲜电商小程序项目',
              num: 2703
            },
            {
              src: './uploads/quality06.png',
              title: '前端框架Flutter开发实战',
              num: 2841
            },
            {
              src: './uploads/quality07.png',
              title: '熟练使用React.js——极客园H5项目',
              num: 95682
            },
            {
              src: './uploads/quality08.png',
              title: '熟练使用React.js——极客园PC端项目',
              num: 904
            },
            {
              src: './uploads/quality09.png',
              title: '前端实用技术，Fetch API 实战',
              num: 1516
            },
            {
              src: './uploads/quality10.png',
              title: '前端高级Node.js零基础入门教程',
              num: 2766
            },
            {
              src: './uploads/quality10.png',
              title: '前端高级Node.js零基础入门教程',
              num: 27669
            }
          ]
          // 2. 利用循环来做字符串拼接生成多个li标签，之后把生成的li标签放入容器 ul 里面渲染即可

          // 遍历数组对象
      //     for (let i = 0; i < data.length; i++) {
      //       console.log(data[i])
      //       document.write(`
      // <li>
      //     <a href="#">
      //       <div class="pic"><img src="${data[i].src}" alt=""></div>
      //       <h4>${data[i].title}</h4>
      //       <p><span>高级</span> · <i>${data[i].num}</i>人在学习</p>
      //     </a>
      //   </li>
      // `)
      //     }


          // 利用for..of  遍历数组对象
          for (let val of data) {
            document.write(`
      <li>
          <a href="#">
            <div class="pic"><img src="${val.src}" alt=""></div>
            <h4>${val.title}</h4>
            <p><span>高级</span> · <i>${val.num}</i>人在学习</p>
          </a>
        </li>
            `)
          }
        </script>

      </ul>
    </div>
  </div>

  <!-- <script>
    // 综合案例代码
    // 1. 利用对象数组的数据渲染页面
    // 综合案例代码
    let data = [
      {
        src: './uploads/quality01.png',
        title: 'JavaScript数据看板项目实战',
        num: 1125
      },
      {
        src: './uploads/quality02.png',
        title: 'Vue.js实战——面经全端项目',
        num: 2726
      },
      {
        src: './uploads/quality03.png',
        title: '玩转Vue全家桶，iHRM人力资源项目',
        num: 9456
      },
      {
        src: './uploads/quality04.png',
        title: 'Vue.js实战医疗项目——优医问诊',
        num: 7192
      },
      {
        src: './uploads/quality05.png',
        title: '小程序实战：小兔鲜电商小程序项目',
        num: 2703
      },
      {
        src: './uploads/quality06.png',
        title: '前端框架Flutter开发实战',
        num: 2841
      },
      {
        src: './uploads/quality07.png',
        title: '熟练使用React.js——极客园H5项目',
        num: 95682
      },
      {
        src: './uploads/quality08.png',
        title: '熟练使用React.js——极客园PC端项目',
        num: 904
      },
      {
        src: './uploads/quality09.png',
        title: '前端实用技术，Fetch API 实战',
        num: 1516
      },
      {
        src: './uploads/quality10.png',
        title: '前端高级Node.js零基础入门教程',
        num: 2766
      },
      {
        src: './uploads/quality10.png',
        title: '前端高级Node.js零基础入门教程',
        num: 27669
      }
    ]
    // 2. 利用循环来做字符串拼接生成多个li标签，之后把生成的li标签放入容器 ul 里面渲染即可


  </script> -->
</body>

</html>